<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {QTable, type TableColums,} from '@meetjs/element-plus-kit'
import axios from "axios";
import {ElMessage} from "element-plus";

const title = ref('在线咨询表')

const page = ref({currentPage: 1, pageSize: 10, total: 0})

const tableData = ref([])
const columns = ref<TableColums[]>([
  {label: '序号', type: 'index', align: 'center', width: 60},
  {prop: 'content', label: '咨询内容'},
  {prop: 'inputTime', label: '咨询时间', width: 200},
  {prop:'forwardContent',label:"回复内容"},
  {prop: 'updateTime', label: '回复时间', width: 200},
  {prop: 'action', fixed: 'right', label: '操作', width: 200,},
])
const forwardContent = reactive({
  forwardContent: '',
  consultId: '',
  content: ''
})
const isShowEdit = ref(false)
const getAskData = () => {
  axios.post(`/api/consult/doctor/getData/${page.value.currentPage}/${page.value.pageSize}`)
      .then(res => {
        console.log(res)
        const msg = res.data.message
        page.value.total = msg.total
        tableData.value = msg.list
      })
}
onMounted(() => {
  getAskData()
})
setInterval(() => {
  getAskData()
}, 3000)
const forwardQ = (row) => {
  console.log(row);
  forwardContent.consultId = row.consultId
  forwardContent.content = row.content
  forwardContent.forwardContent = ''
  isShowEdit.value = true
}
const headers = {
  token: localStorage.getItem("doctor-auth-token")
}
const forbackQ = () => {
  axios.post("/api/consult/forwardInfo", forwardContent, {headers})
      .then(res => {
        console.log(res);
        if (res.data.success) {
          isShowEdit.value = false
          ElMessage({
            message: "回复成功",
            type: "success"
          })
        } else {
          ElMessage({
            message: res.data.message,
            type: "error"
          })
        }
      })
}
</script>

<template>
  <div>
    <QTable :columns="columns" :data="tableData" :page="page" :title="title" @pageChange="getAskData">
      <template #action="scope">
        <el-button size="small" text type="primary" :disabled="scope.row.forwardContent !== null" @click="forwardQ(scope.row)">立即回复</el-button>
      </template>

      <template #empty>
        <div style="font-weight:400;font-size:32px;margin: 30px;">待回复问题空空如也</div>
      </template>
    </QTable>
    <el-dialog v-model="isShowEdit" title="在线回复" width="500">
      <el-form :model="forwardContent.content">
        <el-form-item :label-width="80" label="用户问题">
          <el-input v-model="forwardContent.content" autocomplete="off" disabled/>
        </el-form-item>
        <el-form-item :label-width="80" label="回复内容">
          <el-input v-model="forwardContent.forwardContent" autocomplete="off" rows="10" type="textarea"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="isShowEdit = false">取消</el-button>
          <el-button type="primary" @click="forbackQ">
            立即回复
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>

</style>
